<template>
  <div>
    <!-- 标题 -->
    <van-cell title="搜索历史">
      <van-icon @click='isDel=true' v-if='!isDel' name='delete-o'></van-icon>
      <template v-else>
        <span @click='history.splice(0)'>全部删除</span>
        <span @click='isDel=false' style="margin-left:10px">完成</span>
      </template>
    </van-cell>
    <!-- 历史记录 -->
    <van-cell :title="item" v-for='(item,index) in history' :key='item' @click='clickHistory(index,item)'>
      <van-icon v-if='isDel' name='close'></van-icon>
    </van-cell>
    <!-- 通用错误 -->
    <van-empty v-if='!history.lengths' image="error" description="描述文字" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 控制删除显示
      isDel: false
    }
  },
  props: {
    // 父传子搜索历史
    history: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 点击搜索历史
    clickHistory (index, item) {
      if (this.isDel) {
        this.history.splice(index, 1)
      } else {
        this.$emit('search', item)
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
</style>
